<!--
 * @Author: 杨有财
 * @Date: 2025-02-28 22:16:38
 * @LastEditTime: 2025-03-01 22:25:49
 * @LastEditors: 杨有财
 * @Description: 查询构造器
-->

<template>
  <div class="search-box">
    <t-form
      v-if="!hasSlot"
      ref="form"
      class="form-wrap"
      :data="searchFormData"
      :label-width="labelWidth"
      :layout="layout"
      @reset="onReset"
      @submit="onSubmit"
    >
      <!-- 输入框 -->
      <t-form-item
        v-for="(item, index) in generateForm"
        :key="index"
        :label="item?.label || ''"
        :name="item.name"
        class="search-item"
      >
        <t-input
          v-if="item.type === 'input'"
          v-model="searchFormData[item.name]"
          clearable
          :type="item.inputType"
          :show-limit-number="item.maxlength && item.showLimitNumber ? true : false"
          :placeholder="item.placeholder"
          :suffix="item.suffix"
          :maxlength="item.maxlength"
          @blur="blurInput"
          @enter="enterInput"
        ></t-input>
        <!--下拉列表-->
        <t-select
          v-if="item.type === 'select'"
          v-model="searchFormData[item.name]"
          clearable
          :filterable="item.filterable"
          :options="item.options"
          :multiple="item.multiple"
          :min-collapsed-num="item.minCollapsedNum"
          :suffix="item.suffix"
          :placeholder="item.placeholder"
          :keys="item.keys"
          :popup-props="item.popupProps"
          @blur="blurInput"
          @enter="enterInput"
        />
        <!-- 日期时间区间选择器 -->
        <t-date-range-picker
          v-if="item.type === 'daterange'"
          v-model="searchFormData[item.name]"
          :format="item.format ? item.format : 'YYYY-MM-DD'"
          clearable
          :enable-time-picker="item.enableTimePicker"
          :allow-input="item.allowInput"
          @blur="blurInput"
        />
        <!-- 日期时间选择器 -->
        <t-date-picker
          v-if="item.type === 'date'"
          v-model="searchFormData[item.name]"
          clearable
          :enable-time-picker="item.enableTimePicker"
          :allow-input="item.allowInput"
          @blur="blurInput"
        />
        <!-- 级联选择器 -->
        <t-cascader
          v-if="item.type === 'cascader'"
          v-model="searchFormData[item.name]"
          clearable
          :keys="item.keys"
          :options="item.options"
          :placeholder="item.placeholder"
        />
      </t-form-item>
      <t-form-item v-if="generateForm.length > 0" name="search-btn" class="search-btn">
        <t-space size="10px">
          <t-button v-if="isShowSubmit" theme="primary" type="submit">{{ confirmBtn }}</t-button>
          <t-button v-if="isShowReset" theme="default" variant="base" type="reset">{{ resetBtn }}</t-button>
          <slot name="button"></slot>
        </t-space>
      </t-form-item>
      <slot name="extend"></slot>
    </t-form>
    <t-divider v-if="isAdvancedSearch" class="divider-line" align="center" dashed
      ><t-button theme="primary" variant="text" @click="clickAdvancedSearch">
        更多搜索
        <caret-up-small-icon v-if="!isAdvancedSearch" size="22px" />
        <caret-down-small-icon v-else size="22px" /> </t-button
    ></t-divider>
  </div>
</template>
<script setup lang="ts">
import { CaretDownSmallIcon, CaretUpSmallIcon } from 'tdesign-icons-vue-next';
import { FormProps } from 'tdesign-vue-next';

import type { FormItem } from './types';

defineOptions({
  name: 'SearchBox',
});
const { labelWidth, layout, isShowSubmit, isShowReset, generateForm, confirmBtn, resetBtn, isAdvancedSearch } =
  defineProps({
    // 宽度
    labelWidth: {
      type: String,
      default: 'auto',
    },
    // 按钮排布规则
    layout: {
      type: String as PropType<'inline' | 'vertical'>,
      default: 'inline',
    },
    // 是否确定显示按钮
    isShowSubmit: {
      type: Boolean,
      default: true,
    },
    // 是否重置按钮按钮
    isShowReset: {
      type: Boolean,
      default: true,
    },
    // 构造表单
    generateForm: {
      type: Array as PropType<FormItem[]>,
      required: true,
      default: (): FormItem[] => [],
    },
    // 确定按钮
    confirmBtn: {
      type: String,
      default: '查询',
    },
    // 重置按钮
    resetBtn: {
      type: String,
      default: '重置',
    },
    // 是否显示高级搜索按钮
    isAdvancedSearch: {
      type: Boolean,
      default: false,
    },
  });

const hasSlot = ref(false);
const searchFormData: FormProps['data'] = reactive({});

onMounted(() => {
  hasSlot.value = !!useSlots().default;
  createInitSearchFormData();
});

const createInitSearchFormData = () => {
  if (generateForm.length > 0) {
    generateForm.forEach((element) => {
      searchFormData[element.name] = element.value;
    });
  }
};
const emit = defineEmits(['onSubmit', 'onblur', 'onenter', 'onReset']);

const blurInput = () => {
  emit('onblur', searchFormData);
};
const enterInput = () => {
  emit('onenter', searchFormData);
};
const onReset = () => {
  emit('onReset');
};
const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    emit('onSubmit', { ...searchFormData });
  } else {
    MessagePlugin.warning(firstError);
  }
};

const clickAdvancedSearch = () => {
  const advancedSearchIcon = ref(true);
  advancedSearchIcon.value = !advancedSearchIcon.value;
};
</script>

<style lang="less" scoped>
.search-box {
  padding: var(--td-comp-margin-l) 0;

  .search-btn {
    margin-right: 0;
  }

  :deep(.t-form-item__search-btn) {
    min-width: 0;
  }

  :deep(.t-form-inline) {
    .t-form__item {
      width: 180px;
      min-width: 0;
      margin-right: var(--td-comp-margin-l);
    }
  }

  .divider-line {
    margin-bottom: 0;
    margin-top: 10px;
  }
}
</style>
